<template>
	<view class="profile-container">
		<view class="user-info">
			<text>用户名: {{ userInfo.username }}</text>
			<text>姓名: {{ userInfo.name }}</text>
			<text>联系电话: {{ userInfo.phone }}</text>
			<text>邮箱: {{ userInfo.email }}</text>
		</view>
		<view class="order-list">
			<view class="order-list-title">我的订单</view>
			<view class="order-item" v-for="order in orders" :key="order.orderId" @click="goToOrderDetail(order.orderId)">
				<text>订单号: {{ order.orderId }}</text>
				<text>总价: ￥{{ order.totalPrice }}</text>
				<text class="order-status">{{ getOrderStatusText(order.status) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				orders: []
			}
		},
		onLoad() {
			this.fetchUserInfo();
			this.fetchOrders();
		},
		onShow() {
			// 页面显示时重新获取订单数据
			this.fetchOrders();
		},
		mounted() {
			// 监听订单状态变化事件
			uni.$on('orderStatusChanged', (data) => {
				// 更新订单列表中的对应订单状态
				const orderIndex = this.orders.findIndex(order => order.orderId === data.orderId);
				if (orderIndex !== -1) {
					// 使用 $set 确保响应式更新
					this.$set(this.orders[orderIndex], 'status', data.status);
					// 显示状态更新提示
					uni.showToast({
						title: '订单状态已更新',
						icon: 'none'
					});
				}
			});
		},
		beforeDestroy() {
			// 移除事件监听器
			uni.$off('orderStatusChanged');
		},
		methods: {
			fetchUserInfo() {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				// 调用获取用户信息接口
				uni.request({
					url: `http://localhost:8080/api/customers/${userInfo.customerId}`,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.userInfo = res.data.data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				});
			},
			fetchOrders() {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				// 调用获取订单列表接口
				uni.request({
					url: `http://localhost:8080/api/orders/customer/${userInfo.customerId}`,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.orders = res.data.data;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '获取订单列表失败',
							icon: 'none'
						});
					}
				});
			},
			goToOrderDetail(orderId) {
				uni.navigateTo({
					url: `/pages/order/detail?orderId=${orderId}`
				});
			},
			getOrderStatusText(status) {
				const statusMap = {
					1: '待付款',
					2: '已付款待发货',
					3: '已到货，待收货',
					4: '已收货',
					5: '该订单已取消',
					6: '已申请退货，待审核',
					7: '已退货成功'
				};
				return statusMap[status] || '未知状态';
			}
		}
	}
</script>

<style>
	.profile-container {
		padding: 15px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.user-info {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 25px;
		border-radius: 15px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		margin-bottom: 25px;
	}

	.user-info text {
		display: block;
		margin-bottom: 12px;
		font-size: 16px;
	}

	.user-info text:last-child {
		margin-bottom: 0;
	}

	.user-info text:before {
		content: "• ";
		margin-right: 8px;
	}

	.order-list {
		background-color: #fff;
		border-radius: 15px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.order-list-title {
		background-color: #409eff;
		color: white;
		padding: 15px 20px;
		font-size: 18px;
		font-weight: bold;
	}

	.order-item {
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
	}

	.order-item:hover {
		background-color: #f9f9f9;
		transform: translateX(5px);
	}

	.order-item:last-child {
		border-bottom: none;
	}
	
	.order-item text {
		display: block;
		margin-bottom: 8px;
		font-size: 15px;
	}
	
	.order-item text:last-child {
		margin-bottom: 0;
	}
	
	.order-status {
		color: #ff4d4f;
		font-size: 14px;
		font-weight: bold;
		margin-top: 5px;
		display: inline-block;
		padding: 3px 8px;
		background-color: #fff1f0;
		border-radius: 4px;
		border: 1px solid #ffccc7;
	}
</style>